<template>
    <view>

        <text>加载更多组件用于页面加载更多数据时，页面底部显示内容等场景</text>


        <view style="margin-top: 30px" v-for="item in list">
            <h3>{{ item.type }}</h3>
            <text class="uni-h7">
                {{ item.content }}
            </text>

        </view>

        <uni-load-more :status="status"/>

    </view>
</template>

<script>

export default {
    data() {
        return {
            status: 'more',
            timer: null,
            page: 1,
            list: []
        };
    },
    methods: {
        timerLoad() {
            this.timer = setInterval(() => {
                switch (this.page) {
                    case 1:
                        this.status = 'more';
                        break;
                    case 2:
                        this.status = 'loading'
                        break;
                    case 5:
                        this.status = 'no-more'
                        break;
                }
                this.page++;
                this.getList()
            }, 3000)
        },
        getList() {
            uni.request({
                url: "http://localhost:8000/api/loadMore",
                method: 'get',
                header: {
                    token: uni.getStorageSync("token"),
                },
                data: {
                    page: this.page,
                },
                success: (e) => {
                    if (e.data.status === 'success') {
                        this.list = this.list.concat(e.data.list)
                    } else {
                        if (e.data.status===403){
                            //token验证失败
                            //等同于退出
                            uni.clearStorageSync();
                            uni.redirectTo({url:'/pages/login/login'})
                        }
                        console.log('fail')
                    }
                }
            })
        }
    },
    created() {
        this.timerLoad()
        this.getList()
    },
    beforeDestroy() {
        //清空定时器
        clearInterval(this.timer)
        this.timer = null
    }


}
</script>

<style lang="scss">

</style>
